<template>
	<!--搜索选择器-->
	<div class="clearfix selt">
		<div class="type-wrap logo">
			<div class="fl key brand">品牌</div>
			<div class="value logos">
				<ul class="logo-list">
					<li @click="sendTrademark(t)" v-for="t in trademarkList" :key="t.tmId">{{ t.tmName }}</li>
				</ul>
			</div>
		</div>
		<div class="type-wrap" v-for="a in attrsList" :key="a.attrId">
			<div class="fl key">{{ a.attrName }}</div>
			<div class="fl value">
				<ul class="type-list">
					<li v-for="(a1, index) in a.attrValueList" :key="index">
						<a @click="sendProps(a, a1)">{{ a1 }}</a>
					</li>

				</ul>
			</div>
			<div class="fl ext"></div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'SearchSelector',
	computed: {
		...mapState({
			trademarkList: state => state.Search.search.trademarkList,
			attrsList: state => state.Search.search.attrsList
		})
	},
	methods: {
		sendTrademark(value) {
			this.$emit("getTrademark", value)
		},
		sendProps(attrs, attrValue) {
			this.$emit("arr-props", attrs, attrValue)
		}
	}
}
</script>

<style lang="less" scoped>
.selt {
	border: 1px solid #ddd;
	margin-bottom: 5px;
	overflow: hidden;

	.logo {
		border-top: 0;
		margin: 0;
		position: relative;
		overflow: hidden;

		.key {
			padding-bottom: 87px !important;
		}
	}

	.type-wrap {
		margin: 0;
		position: relative;
		border-top: 1px solid #ddd;
		overflow: hidden;

		.key {
			width: 100px;
			background: #f1f1f1;
			line-height: 26px;
			text-align: right;
			padding: 10px 10px 0 15px;
			float: left;
		}

		.value {
			overflow: hidden;
			padding: 10px 0 0 15px;
			color: #333;
			margin-left: 120px;
			padding-right: 90px;

			.logo-list {
				li {
					float: left;
					border: 1px solid #e4e4e4;
					margin: -1px -1px 0 0;
					width: 105px;
					height: 52px;
					text-align: center;
					line-height: 52px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: 700;
					color: white;
					background: #e1251b;
					font-size: 14px;

					&:hover {
						cursor: pointer;
						background: #ad1912;
					}

					img {
						max-width: 100%;
						vertical-align: middle;
					}
				}
			}

			.type-list {
				li {
					float: left;
					display: block;
					margin-right: 30px;
					line-height: 26px;

					a {
						text-decoration: none;
						color: #666;

						&:hover {
							cursor: pointer;
							color: #e1251b;
						}

					}
				}
			}
		}

		.ext {
			position: absolute;
			top: 10px;
			right: 10px;

			.sui-btn {
				display: inline-block;
				padding: 2px 14px;
				box-sizing: border-box;
				margin-bottom: 0;
				font-size: 12px;
				line-height: 18px;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
				padding: 0 10px;
				background: #fff;
				border: 1px solid #d5d5d5;
			}

			a {
				color: #666;
			}
		}
	}
}
</style>